<template>
  <div>
    <h1>hello</h1>
    <h2>{{ count }}</h2>
    <h2>{{ count }}</h2>
    <h2>{{ $store.state.uname }}</h2>
    <button @click="add">点击加10</button>
    <button @click="asyncAdd">异步增加</button>

    <h1>getters里的countSqu:{{ countSqu }}</h1>
    <Me></Me>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import Me from '@/components/tbodyTr.vue'
export default {
  components: {
    Me,
  },
  created() {
    // console.log(this)
  },
  computed: {
    // count(){
    //   return this.$store.state.count
    // }
    ...mapState(['uname', 'count']),
    ...mapGetters(['countSqu']),
  },
  methods: {
    ...mapActions(['asyncAddCount']),
    add() {
      this.$store.commit('addCount', 10)
    },
    asyncAdd() {
      // this.$store.dispatch('asyncAddCount',5)
      this.asyncAddCount(10)
    },
  },
}
</script>

<style></style>
